<template>
  <div class="order">
    <!-- 顶部标签页 -->
    <div class="head">
      <van-tabs class="tabs" @click="changeTab" v-model="activeName" color="#FEAD00" title-active-color="black"
        line-width="64px">
        <van-tab title="全部订单" name="allOrder"></van-tab>
        <van-tab title="返佣订单" name="rebateOrder"></van-tab>
        <van-tab title="退款订单" name="refundOrder"></van-tab>
      </van-tabs>
    </div>

    <!-- 订单组件 -->
    <OrderCard :list="orderList" />

    <Tabbar />
  </div>
</template>

<script>
import OrderCard from "../components/order/orderCard.vue";
import Tabbar from "../components/tabbar.vue";

export default {
  name: "order", // 订单
  components: {
    OrderCard,
    Tabbar,
  },
  data() {
    return {
      activeName: "allOrder",
      list: [ // 订单列表
        {
          orderNum: "EMS155090900800", // 订单号
          ticketName: "【只有峨眉山】演艺票", // 剧名
          number: "4", // 数目
          consumePrice: "968", // 消费金额
          date: "2022-07-28  14:34", // 日期
          commission: "420", // 佣金
          purchaser: "L*", // 购票人
          type: "已返佣",
          name: "rebateOrder"
        },
        {
          orderNum: "EMS155090900800", // 订单号
          ticketName: "【只有峨眉山】演艺票", // 剧名
          number: "4", // 数目
          consumePrice: "968", // 消费金额
          date: "2022-07-28  14:34", // 日期
          commission: "420", // 佣金
          purchaser: "L*", // 购票人
          type: "待返佣", // 订单类型
          name: "rebateOrder"
        },
        {
          orderNum: "EMS155090900800", // 订单号
          ticketName: "【只有峨眉山】演艺票", // 剧名
          number: "4", // 数目
          consumePrice: "968", // 消费金额
          date: "2022-07-28  14:34", // 日期
          commission: "420", // 佣金
          purchaser: "L*", // 购票人
          type: "已退款", // 订单类型
          name: "refundOrder"
        },
      ],
      orderList: [],

    };
  },
  mounted() { this.changeTab("allOrder") },
  methods: {
    changeTab(name, title) {
      console.log('name', name)
      this.orderList.length = 0;
      if (name == "allOrder") {
        this.list.forEach((v) => {
          this.orderList.push(v);
        })
        return;
      }
      this.list.forEach((v) => {
        if (v.name == name) {
          this.orderList.push(v);
        }
      })
    },
  },

}
</script>

<style lang="scss" scoped>
.order {
  background-color: #f5f5f5;
  min-height: 100vh;
  .head {
    // margin-bottom: 34px;
    background-color: #ffffff;

  }
}
::v-deep .van-tab--active {
  font-weight: bold;
}

</style>